"use client";
import React, { useEffect, useRef, useState } from 'react';
import Menu from '../components/Menu';

const Myapp = () => {
    const [mouseStartPosition, setMouseStartPosition] = useState({ x: 0, y: 0 });
    const [width, setWidth] = useState(400);
    const [height, setHeight] = useState(400);
    const [startWidth, setStartWidth] = useState(0);
    const [startHeight, setStartHeight] = useState(0);

    const [isResizing, setIsResizing] = useState(false);
    const handleMouseDown = (event: React.MouseEvent) => {
        event.preventDefault();
        console.log(event);
        // 记录鼠标按下时的位置
        setIsResizing(true);
        console.log("初始鼠标位置", event.clientX, event.clientY);
        setMouseStartPosition({ x: event.clientX, y: event.clientY });
        setStartWidth(width);
        setStartHeight(height);
    };

    const handleMouseMove = (event: React.MouseEvent) => {
        event.preventDefault();
        if (isResizing) {
            if (event.target.innerHTML === "x") {
                const x = event.clientX - mouseStartPosition.x;
                const newWidth = startWidth + x;
                setWidth(newWidth);
            } else if (event.target.innerHTML === "y") {
                const y = event.clientY - mouseStartPosition.y;
                const newHeight = startHeight + y;
                setHeight(newHeight);
            }



        }

    };
    const handleMouseMoveY = (event: React.MouseEvent) => {
        event.preventDefault();
        if (isResizing) {


            setHeight(newHeight);
        }

    };

    const handleMouseUp = (event: React.MouseEvent) => {
        event.preventDefault();
        setIsResizing(false);
    };
    const handleMouseLeave = (event: React.MouseEvent) => {
        event.preventDefault();
        // setIsResizing(false);
    };

    useEffect(() => {
        document.addEventListener('mousemove', handleMouseMove);
        return () => {
            document.removeEventListener('mousemove', handleMouseMove);
        };
    }, [width, height]);

    return (
        <div style={{ width: (width) + "px", height: (height) + "px" }} className={`!box-content relative flex bg-amber-100 border-[#00000000] border-8 w-[400px] h-[400px]`}>
            {/* 主题内容 */}
            <div className='bg-[#16086430] w-full h-full'>
                222
            </div>
            {/* 上边框 */}
            <div className='top-[-1rem] z-1 absolute bg-[#99eae5a9] w-full h-[1.5rem] hover:cursor-n-resize'></div>
            {/* 下边框 */}
            <div className='bottom-[-1rem] z-1 absolute bg-[#99eae5a9] w-full h-[1.5rem] hover:cursor-row-resize'></div>
            {/* 左边框 */}
            <div onMouseDown={handleMouseDown} onMouseLeave={handleMouseLeave} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} className='left-[-1rem] z-1 absolute bg-[#99eae5a9] opacity-0 w-[1.5rem] h-full hover:cursor-col-resize'>x</div>
            {/* 右边框  */}
            <div onMouseDown={handleMouseDown} onMouseLeave={handleMouseLeave} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} className='right-[-1rem] z-1 absolute bg-[#99eae5a9] w-[1.5rem] h-full hover:cursor-col-resize'>x</div>

            {/* 左上角 */}
            <div className='top-[-1rem] left-[-1rem] z-1 absolute bg-[#99eae5a9] w-[1.5rem] h-[1.5rem] hover:cursor-nw-resize'></div>
            {/* 右上角 */}
            <div className='top-[-1rem] right-[-1rem] z-1 absolute bg-[#99eae5a9] w-[1.5rem] h-[1.5rem] hover:cursor-ne-resize'></div>
            {/* 左下角 */}
            <div className='bottom-[-1rem] left-[-1rem] z-1 absolute bg-[#99eae5a9] w-[1.5rem] h-[1.5rem] hover:cursor-sw-resize'></div>
            {/* 右下角 */}
            <div className='right-[-1rem] bottom-[-1rem] z-1 absolute bg-[#99eae5a9] w-[1.5rem] h-[1.5rem] hover:cursor-se-resize'></div>

        </div>
    );
};

const Page = () => {


    const ResizableComponent = () => {
        const ref = useRef(null);
        const [width, setWidth] = useState(200);
        const [height, setHeight] = useState(150);
        const [isResizing, setIsResizing] = useState(false);
        const [startX, setStartX] = useState(0);
        const [startY, setStartY] = useState(0);
        const [startWidth, setStartWidth] = useState(0);
        const [startHeight, setStartHeight] = useState(0);

        const handleMouseDown = (e) => {
            if (e.target === ref.current) {
                setIsResizing(true);
                setStartX(e.pageX);
                setStartY(e.pageY);
                setStartWidth(width);
                setStartHeight(height);
            }
        };

        const handleMouseMove = (e) => {
            if (isResizing) {
                const newWidth = startWidth + (e.pageX - startX);
                const newHeight = startHeight + (e.pageY - startY);
                setWidth(newWidth);
                setHeight(newHeight);
            }
        };

        const handleMouseUp = () => {
            setIsResizing(false);
        };

        return (
            <div
                ref={ref}
                style={{
                    width: `${width}px`,
                    height: `${height}px`,
                    background: 'lightgreen',
                    position: 'relative',
                    cursor: 'se-resize'
                }}
                onMouseDown={handleMouseDown}
                onMouseMove={handleMouseMove}
                onMouseUp={handleMouseUp}
            >
                可伸缩区域
            </div>
        );
    };


    return (
        <div>
            <Menu />
            <ResizableComponent />
            <Myapp />
        </div>
    );
};

export default Page;
